﻿<fieldset class="table-search-fieldset">
    <legend>搜索信息</legend>
    <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item" style="margin-bottom: 0px;">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" name="UserName" placeholder="账户" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <select name="RoleId" lay-verify="required">
                        <option value="">请选择角色</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" name="TrueName" placeholder="姓名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" name="PhoneNumber" placeholder="手机" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <button type="button" class="layui-btn layui-btn-primary" id="btnQuery"><i class="layui-icon layui-icon-search"></i>搜索</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</fieldset>
<table class="layui-hide" id="datatable" lay-filter="datatable"></table>

@section Scripts{
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add"> 新增用户 </button>
            <button-auth id="password" text="重置密码" class="layui-btn layui-btn-danger layui-btn-sm" url="SysUser/PasswordReset" type="button"></button-auth>
    </div>
</script>
<script type="text/html" id="tablebar">
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="/js/datatable.js" charset="utf-8"></script>
<script>
    layui.use(function() {
        var form = layui.form;
        var $ = layui.jquery,
            table = layui.table;
        $.ajax({
            url: '/SysRole/Index',
            success: function(res) {
                if (res.Code == 200) {
                    $(res.Data).each(function(index, item) {
                        $("select[name='RoleId']").append("<option value='" + item.Id + "'>" + item.RoleName + "</option>");
                    });
                    form.render("select");
                }
            }
        });
        var options = {
            url: "/SysUser/Index",
            cols: [[
                    { type: 'checkbox' },
                    {
                        field: 'UserName',
                        title: '账户'
                    },
                    {
                        field: 'RoleName',
                        title: '角色'
                    },
                    {
                        field: 'TrueName',
                        title: '姓名'
                    },
                    {
                        field: 'IDNumber',
                        title: '身份证号'
                    },
                    {
                        field: 'PhoneNumber',
                        title: '手机号'
                    },
                    {
                        field: 'AddTime',
                        title: '添加时间'
                    },
                    {
                        templet: '#tablebar',
                        width: 120,
                        align: 'center',
                        title: '操作'
                    }
                ]
            ]
        };
        //options.cols[0][options.cols[0].length-1].hide=true;//可设置某列隐藏
        layui.dataTable(options);

        //监听头部事件
        table.on('toolbar(datatable)', function(obj) {
            switch (obj.event) {
                case 'add':
                    var index = layer.open({
                        type: 2,
                        title: '新增用户',
                        area: ['400px', '365px'],
                        content: "/SysUser/Add",
                        end: function() {
                            layui.tableReload();
                        }
                    });
                    break;
                case 'password':      
                    var checkStatus = table.checkStatus(obj.config.id);         
                    if(checkStatus.data.length > 0){
                        var ids = [];
                        $(checkStatus.data).each(function (i, data) {
                            ids.push(data.Id);
                        });
                        layer.confirm('确定重置密码吗？', function(index) {
                            $.ajax({
                                url: "/SysUser/PasswordReset",
                                data: { ids :ids },
                                success: function(res) {
                                    if (res.Code == 200) {
                                        layer.msg('重置成功');
                                    } else {
                                        layer.msg(res.Message);
                                    }
                                }
                            });
                        });
                    }
                    else
                        layer.msg('请至少选择一条数据');
                    break;
            };
            return false;
        });
        table.on('tool(datatable)', function(obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                var index = layer.open({
                    type: 2,
                    title: '修改用户',
                    area: ['400px', '365px'],
                    content: "/SysUser/Edit/"+data.Id,
                    end: function() {
                        layui.tableReload();
                    }
                });
            } else if (obj.event === 'del') {
                layer.confirm('确定删除该条数据吗？', function(index) {
                    $.ajax({
                        url: "/SysUser/Delete/"+data.Id,
                        success: function(res) {
                            if (res.Code == 200) {
                                layer.msg('删除成功');
                                obj.del();
                            } else {
                                layer.msg(res.Message);
                            }
                        }
                    });
                });
            }
            return false;
        });
    });
</script>
}
